.editor-drawer-well {
	position: relative;
}

.editor-drawer-well.is-empty .editor-drawer-well__content {
	display: none;
}

.editor-drawer-well__placeholder {
	@extend .card;
	display: block;
	width: 100%;
	padding: 24px;
	margin: 0;
	background: lighten( $gray, 30% );
	cursor: pointer;

	&:hover {
		border-color: lighten( $gray, 10% );
		color: $gray-dark;
	}
}

.editor-drawer-well__placeholder[disabled] .editor-drawer-well__button {
	@extend .button[disabled];
}

.editor-drawer-well__placeholder .gridicon {
	color: $gray;
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 8px;
}

.editor-drawer-well__button {
	display: block;
	width: 100%;
}

.editor-drawer-well__remove {
	position: absolute;
		top: 0;
		/*rtl:ignore*/
		right: 0;
	width: 28px;
	height: 28px;
	/*rtl:ignore*/
	transform: translate( 25%, -25% );
	border: 1px solid lighten( $gray, 10% );
	border-radius: 50%;
	background-color: $gray-light;
	cursor: pointer;
}

.editor-drawer-well__remove .editor-drawer-well__remove-icon.gridicon {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate( -50%, -50% );
	width: 24px;
	height: 24px;
	margin: 0;
	color: lighten( $gray, 10% );
}
